import React from 'react';
import { Collapse, Typography, Card } from 'antd';
import { BookOutlined, CodeOutlined, BulbOutlined } from '@ant-design/icons';

const { Title, Paragraph, Text } = Typography;
const { Panel } = Collapse;

/**
 * 学习笔记页面
 * 使用折叠面板分类展示学习笔记。
 */
const NotesPage = () => {
  const notesData = [
    {
      key: '1',
      title: 'React 核心概念',
      icon: <CodeOutlined />,
      notes: [
        '**组件(Component):** React 应用的核心构建块，可复用且独立。',
        '**JSX:** JavaScript 的语法扩展，用于在 JS 中编写类似 HTML 的结构。',
        '**Props:** 用于组件间传递数据，从父组件到子组件。',
        '**State:** 用于管理组件内部的可变数据。',
      ],
    },
    {
      key: '2',
      title: 'Git 常用命令',
      icon: <BookOutlined />,
      notes: [
        '**git clone [url]:** 克隆远程仓库到本地。',
        '**git add [file]:** 将文件添加到暂存区。',
        '**git commit -m "[message]":** 将暂存区内容提交到本地仓库。',
        '**git push:** 将本地提交推送到远程仓库。',
        '**git pull:** 从远程仓库拉取最新更改。',
      ],
    },
    {
      key: '3',
      title: 'CSS 布局技巧',
      icon: <BulbOutlined />,
      notes: [
        '**Flexbox:** 一维布局模型，非常适合用于容器内的项目对齐和分布。',
        '**Grid:** 二维布局模型，可以同时处理行和列，适合复杂的页面布局。',
        '**position: absolute/relative:** 用于元素的精确定位。',
      ],
    },
  ];

  const panelHeader = (icon, title) => (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      {React.cloneElement(icon, { style: { marginRight: 8, color: '#1890ff' } })}
      <Text strong>{title}</Text>
    </div>
  );

  return (
    <div className="bg-gray-50 py-8 px-4 sm:px-6 lg:px-8" style={{marginBottom:'7%'}}>
      <div className="container mx-auto">
        <Title level={2} style={{ textAlign: 'center', marginBottom: '32px' }}>
          学习笔记
        </Title>
        <Paragraph style={{ textAlign: 'center', maxWidth: '600px', margin: '0 auto 48px' }}>
          这里整理了我在学习过程中记录的各类笔记，方便随时查阅和复习。
        </Paragraph>
        
        <Card bordered={false}>
          <Collapse accordion defaultActiveKey={['1']}>
            {notesData.map(category => (
              <Panel header={panelHeader(category.icon, category.title)} key={category.key}>
                <ul className="list-disc pl-5 space-y-2">
                  {category.notes.map((note, index) => (
                    <li key={index}><Text>{note}</Text></li>
                  ))}
                </ul>
              </Panel>
            ))}
          </Collapse>
        </Card>
      </div>
    </div>
  );
};

export default NotesPage;